<template>
  <el-dialog @open="openDialog" :title="isAdd?'新增':'编辑'" :visible="dialogFormVisible" @close="closeDialog">
    <el-form :model="form" label-width="80px">
      <!--<el-form-item label="头像" prop="avatar">
        <el-upload
          class="avatar-uploader"
          :action="host+'/guard/upload?module=avatar'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.avatar" :src="host+form.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>-->
      <el-form-item label="用户">
        <el-select v-model="form.userId" filterable  multiple  placeholder="请选择">
          <el-option
            v-for="item in users"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.passport }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订票时间">
        <el-date-picker
          v-model="form.bookingDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="航班号">
        <el-input v-model="form.flyNumber"></el-input>
      </el-form-item>



      <el-form-item label="积分">
        <el-input type="number" v-model.number="form.needPoint"></el-input>
      </el-form-item>

      <!-- <el-form-item label="性别" prop="gender">
         <el-radio v-model="form.gender" label="1">男</el-radio>
         <el-radio v-model="form.gender" label="2">女</el-radio>
       </el-form-item>-->
      <!-- <el-form-item label="地址" prop="address">
         <el-input v-model="form.address"></el-input>
       </el-form-item>-->
      <!--      <el-form-item label="备注" prop="beizhu">
              <el-input :rows="3" type="textarea" v-model="form.beizhu"></el-input>
            </el-form-item>-->
      <!--      <el-form-item label="状态" prop="status">
              <el-switch
                v-model="form.status"
                :active-value="1"
                :inactive-value="2"
                active-text="启用"
                inactive-text="禁用">
              </el-switch>
            </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { myGet, myPost } from '@/utils/myUtils'

const urlAdd = '/guard/flyOrder/add'
const urlUserLst = '/guard/user/lst'

export default {
  name: 'AddFlyOrderDialog',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default: {}
    }

  },

  data() {
    return {
      form: {
        id: 0,
        userId: 0,
        flyNumber: '',
        type: 2,
        bookingDate: '',
        status: 2,
        needPoint: 0
      },
      users: [],
      host: process.env.VUE_APP_HOST
    }
  },
  methods: {

    handleAvatarSuccess(res, file) {
      if (res.status) {
        this.form.avatar = res.data.records.filePath
      } else {
        this.$message.error('上传失败!')
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },

    onSubmit() {
      myPost(urlAdd, this.form).then(res => {
        if (res) {
          this.$message.success(res.msg)
          this.$emit('success', false)
        }
      })
    },
    cancel() {
      this.$emit('cancelDialog', false)
      Object.assign(this.$data.form, this.$options.data().form)
    },
    closeDialog() {
      this.cancel()
    },
    async openDialog() {
      this.users = []
      Object.assign(this.$data.form, this.$options.data().form)
        await myGet(urlUserLst,{all:1}).then(res=>{
         res.data.records.forEach(user=>{
           this.users.push(user)
         })
      })
    },


  },
  computed: {
    isAdd: function() {
      return Object.keys(this.record).length <= 0
    }
  },

}
</script>

<style scoped>

.el-select{
  width: 100%;
}

</style>
